import 'package:flutter/material.dart';

// ignore: must_be_immutable
class Register extends StatefulWidget {
  int state = 0;
  State<Register> createState() => _RegisterState();
}

class _RegisterState extends State<Register> {
  Object _groupValue;
  bool showPassword = true;
  bool entenPassword = true;
  bool checked = true;
  _codeWidget() {
    return Scaffold(
      appBar: AppBar(
        title: Text('注册'),
        centerTitle: true,
        elevation: 0,
        //leading: Icon(Icons.close),
      ),
      body: Container(
        padding: EdgeInsets.all(30),
        margin: EdgeInsets.only(top: 40),
        child: Column(
          children: [
            Image.asset(
              'images/login/logo.png',
              width: 103,
              height: 71,
            ),
            Container(
              margin: EdgeInsets.only(top: 30),
              child: Row(
                children: [
                  Container(
                    margin: EdgeInsets.only(right: 10),
                    child: Image.asset(
                      'images/login/phone.png',
                      width: 20,
                      height: 20,
                    ),
                  ),
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                        border: OutlineInputBorder(borderSide: BorderSide.none),
                        hintText: '请输入手机号',
                      ),
                    ),
                  )
                ],
              ),
            ),
            Container(
              child: Row(
                children: [
                  Container(
                    margin: EdgeInsets.only(right: 10),
                    child: Image.asset(
                      'images/login/code.png',
                      width: 20,
                      height: 20,
                    ),
                  ),
                  Container(
                    child: Row(
                      children: [
                        Container(
                          width: 180,
                          child: TextField(
                            decoration: InputDecoration(
                              border: OutlineInputBorder(
                                  borderSide: BorderSide.none),
                              hintText: '请输入验证码',
                            ),
                          ),
                        ),
                        TextButton(onPressed: () {}, child: Text('获取验证码'))
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 10),
              width: MediaQuery.of(context).size.width,
              height: 48,
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    widget.state = 1;
                  });
                },
                child: Text('下一步'),
                // style: ElevatedButton.styleFrom(backgroundColor: Colors.black),
              ),
            )
          ],
        ),
      ),
    );
  }

  _registerWidget() {
    return Scaffold(
      appBar: AppBar(
        title: Text('注册'),
        centerTitle: true,
        elevation: 0,
        //leading: Icon(Icons.close),
      ),
      body: Container(
        padding: EdgeInsets.only(top: 30, left: 30, right: 30),
        margin: EdgeInsets.only(top: 30),
        child: Column(
          children: [
            Image.asset(
              'images/login/logo.png',
              width: 103,
              height: 71,
            ),
            Container(
              margin: EdgeInsets.only(top: 30),
              child: Row(
                children: [
                  Container(
                    margin: EdgeInsets.only(right: 10),
                    child: Image.asset(
                      'images/register/nickname.png',
                      width: 20,
                      height: 20,
                    ),
                  ),
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                          border:
                              OutlineInputBorder(borderSide: BorderSide.none),
                          hintText: '请输入昵称',
                          hintStyle: TextStyle(
                              color: Color.fromRGBO(153, 153, 153, 1))),
                    ),
                  )
                ],
              ),
            ),

            //性别
            Container(
              child: Row(
                children: [
                  Image.asset(
                    'images/register/sex.png',
                    width: 20,
                    height: 20,
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Text(
                    '请选择性别',
                    style: TextStyle(
                        color: Color.fromRGBO(153, 153, 153, 1),
                        fontSize: 14.5),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Text("男"),
                  Radio(
                      //波纹的颜色

                      activeColor: Colors.blue,
                      fillColor: MaterialStateProperty.all(Colors.black),
                      value: "男",
                      groupValue: this._groupValue,
                      onChanged: (value) {
                        setState(() {
                          this._groupValue = value;
                        });
                      }),
                  Text("女"),
                  Radio(
                      //波纹的颜色

                      activeColor: Colors.blue,
                      fillColor: MaterialStateProperty.all(Colors.black),
                      value: "女",
                      groupValue: this._groupValue,
                      onChanged: (value) {
                        setState(() {
                          this._groupValue = value;
                        });
                      })
                ],
              ),
            ),
//密码
            Container(
              child: Row(
                children: [
                  Container(
                    margin: EdgeInsets.only(right: 10),
                    child: Image.asset(
                      'images/login/password.png',
                      width: 20,
                      height: 20,
                    ),
                  ),
                  Container(
                    child: Row(
                      children: [
                        Container(
                          width: 180,
                          child: TextField(
                            obscureText: showPassword,
                            decoration: InputDecoration(
                              border: OutlineInputBorder(
                                  borderSide: BorderSide.none),
                              hintText: '请输入密码',
                              hintStyle: TextStyle(
                                  color: Color.fromRGBO(153, 153, 153, 1)),
                              suffixIcon: IconButton(
                                color: Colors.grey,
                                icon: Icon(this.showPassword
                                    ? Icons.visibility_off
                                    : Icons.visibility),
                                onPressed: () {
                                  setState(() {
                                    this.showPassword = !this.showPassword;
                                  });
                                },
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              child: Row(
                children: [
                  Container(
                    margin: EdgeInsets.only(right: 10),
                    child: Image.asset(
                      'images/login/password.png',
                      width: 20,
                      height: 20,
                    ),
                  ),
                  Container(
                    child: Row(
                      children: [
                        Container(
                          width: 180,
                          child: TextField(
                            obscureText: this.entenPassword,
                            decoration: InputDecoration(
                              border: OutlineInputBorder(
                                  borderSide: BorderSide.none),
                              hintText: '请确认密码',
                              hintStyle: TextStyle(
                                  color: Color.fromRGBO(153, 153, 153, 1)),
                              suffixIcon: IconButton(
                                color: Colors.grey,
                                icon: Icon(this.entenPassword
                                    ? Icons.visibility_off
                                    : Icons.visibility),
                                onPressed: () {
                                  setState(() {
                                    this.entenPassword = !this.entenPassword;
                                  });
                                },
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),

            Container(
              child: Row(
                children: [
                  Checkbox(
                      value: checked,
                      onChanged: (value) {
                        setState(() {
                          checked = value;
                        });
                      }),
                  Text(
                    '请仔细阅读并同意',
                    style: TextStyle(color: Color.fromRGBO(153, 153, 153, 1)),
                  ),
                  GestureDetector(
                    onTap: () {},
                    child: Text(
                      '《多威商城用户协议》',
                    ),
                  )
                ],
              ),
            ),

            Container(
              margin: EdgeInsets.only(top: 10),
              width: MediaQuery.of(context).size.width,
              height: 48,
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    widget.state = 1;
                  });
                },
                child: Text('确认注册'),
                // style: ElevatedButton.styleFrom(backgroundColor: Colors.black),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    '已有账号',
                    style: TextStyle(color: Color.fromRGBO(153, 153, 153, 1)),
                  ),
                  GestureDetector(
                    onTap: () {
                      Navigator.pushReplacementNamed(context, 'login');
                    },
                    child: Text(
                      '请登录',
                      style: TextStyle(
                        decoration: TextDecoration.underline,
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return widget.state == 0 ? _codeWidget() : _registerWidget();
  }
}
